<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="CSS/common.css">
    <link rel="stylesheet" href="CSS/reset.css">
    <link rel="stylesheet" href="CSS/shopCar.css">
</head>

<body>
    <!-- 1.头部 -->
    <div id="header">
        <div class="top">
            <div class="container font14 ce6 clearfix">
                <div class="pl200 fl">logoChina.cn</div>
                <div class="fr">
                    欢迎光临乐购，请 <a href="#" class="cf60">登录</a>\<a href="#" class="cf60">注册</a>
                </div>
            </div>
        </div>
        <!-- 菜单栏 -->
        <div class="container pr">
            <!-- logo -->
            <div class="logo pa"><a href="index.html"><img src="images/logo.jpg" alt=""></a></div>
            <!--搜索和购物车  -->
            <div class="clearfix ptb520">
                <!-- 我的订单 -->
                <div class="fr shopcar tcenter ml36 font14 ">
                    <a href="#" class="cfff">购物车 3</a>
                    <a href="#" class="c918d8d">我的订单</a>
                </div>

                <!-- 搜索框 -->
                <form action="" class="fr search">
                    <input type="text" placeholder="创意文具">
                    <input type="submit" value="" class="btn">
                </form>

            </div>
            <!-- 导航栏 -->
            <ul class="nav clearfix font16 ml236">
                <li><a href="#">图书</a></li>
                <li><a href="#">电子书</a></li>
                <li><a href="#">原创文学</a></li>
                <li><a href="#">服装</a></li>
                <li><a href="#">运动户外</a></li>
                <li><a href="#">孕婴童</a></li>
                <li><a href="#">家具</a></li>
                <li><a href="#">创意文具</a></li>
                <li><a href="#">地方特产</a></li>
                <li><a href="#">海外购</a></li>
                <li><a href="#">电器城</a></li>
            </ul>

        </div>
    </div>
    <!-- 2.内容 -->
    <div id="shopCar" class="container mt30">
        <table>
            <!-- 标题 -->
            <thead>
                <tr>
                    <th width="50px"><input type="checkbox" class="checkall"> 全选</th>
                    <th width="300px">商品</th>
                    <th width="250px">单价</th>
                    <th width="250px">数量</th>
                    <th width="100px">小计</th>
                    <th width="200px">操作</th>
                </tr>
            </thead>
            <!-- 商品信息 -->
            <tbody>
                <tr class="car-item">
                    <td>
                        <input type="checkbox" class="j-checkbox">
                    </td>
                    <td> <img src="images/书籍/22616096-1_l.jpg" alt="">平凡的世界</td>
                    <td class="p-price">￥41.00</td>
                    <td>
                        <span class="reNum fl">-</span>
                        <input type="text" value="1" class="numBox fl">
                        <span class="addNum fl">+</span>
                    </td>
                    <td class="p-sum">￥41.00</td>
                    <td>
                        <a class="p-action">删除</a>
                        <p>移动我的关注</p>
                    </td>
                </tr>

                <tr class="car-item">
                    <td>
                        <input type="checkbox" class="j-checkbox">
                    </td>
                    <td> <img src="images/书籍/22790777-1_l_1.jpg" alt="">规矩和爱</td>
                    <td class="p-price">￥21.00</td>
                    <td>
                        <span class="reNum fl">-</span>
                        <input type="text" value="1" class="numBox fl">
                        <span class="addNum fl">+</span>
                    </td>
                    <td class="p-sum">￥21.00</td>
                    <td>
                        <a class="p-action">删除</a>
                        <p>移动我的关注</p>
                    </td>
                </tr>

                <tr class="car-item">
                    <td>
                        <input type="checkbox" class="j-checkbox">
                    </td>
                    <td> <img src="images/书籍/22790777-1_l_1.jpg" alt="">规矩和爱</td>
                    <td class="p-price">￥21.00</td>
                    <td>
                        <span class="reNum fl">-</span>
                        <input type="text" value="1" class="numBox fl">
                        <span class="addNum fl">+</span>
                    </td>
                    <td class="p-sum">￥21.00</td>
                    <td>
                        <a class="p-action">删除</a>
                        <p>移动我的关注</p>
                    </td>
                </tr>
            </tbody>

            <!-- 总价 -->
            <tfoot>
                <tr>
                    <td><input type="checkbox" class="checkall">全选</td>
                    <td class="remove-batch">删除选择商品</td>
                    <td class="clear-all">清空购物车</td>
                    <td>已选择 <span class="amount-sum">1</span> 件商品</td>
                    <td>总价：<span class="price-sum">41.00</span></td>
                    <td><button class="btn">去结算</button></td>
                </tr>
            </tfoot>

        </table>
    </div>







    <script src="js/jquery-1.11.0.js"></script>
    <script src="js/shopCar.js"></script>
</body>

</html>